<template>
  <div class="main">
    <el-tabs type="border-card" stretch v-model="searchVal" @tab-click="handleClick">
      <el-tab-pane label="豆粕"></el-tab-pane>
      <el-tab-pane label="螺纹钢"></el-tab-pane>
      <el-tab-pane label="PTA"></el-tab-pane>
      <el-tab-pane label="热卷"></el-tab-pane>
      <el-tab-pane label="甲醇"></el-tab-pane>
      <el-tab-pane label="PVC"></el-tab-pane>
      <el-tab-pane label="玻璃"></el-tab-pane>
      <el-tab-pane label="纯碱"></el-tab-pane>
      <el-tab-pane label="豆油"></el-tab-pane>
      <el-tab-pane label="菜粕"></el-tab-pane>
      <el-tab-pane label="玉米"></el-tab-pane>
      <el-tab-pane label="棉花"></el-tab-pane>
      <el-tab-pane label="棕榈油"></el-tab-pane>
      <el-tab-pane label="铁矿石"></el-tab-pane>
      <el-tab-pane label="塑料"></el-tab-pane>
      <el-tab-pane label="乙二醇"></el-tab-pane>
      <el-tab-pane label="聚丙烯"></el-tab-pane>
    </el-tabs>
    <div class="filter">
      <el-input v-model="searchVal" style="width:500px;margin-right:15px;" @keyup.enter.native="getContracts" placeholder="请输入品种或代码"></el-input>
      <el-button type="primary" @click="getContracts">查询</el-button>
    </div>
    <div class="table">
      <el-table border highlight-current-row :data="tableData" style="width: 100%" height="calc(100vh - 25vh)">
        <el-table-column prop="name" label="合约">
        </el-table-column>
        <!-- <el-table-column prop="code" label="代码">
        </el-table-column> -->
        <el-table-column prop="holdingAmount" label="持仓量">
        </el-table-column>
        <el-table-column prop="volume" label="成交量">
        </el-table-column>
        <el-table-column sortable prop="ratio" label="涨跌幅">
          <template slot-scope="{row}">
            <span style="font-weight:700" :style="{color:row.ratio.includes('-')?'green':row.ratio.includes('+')?'red':''}">{{row.ratio}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="increase" label="涨跌额">
          <template slot-scope="{row}">
            <span style="font-weight:700" :style="{color:row.increase.includes('-')?'green':row.increase.includes('+')?'red':''}">{{row.increase}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="CNYPrice" label="现价">
          <template slot-scope="{row}">
            <span style="font-size:15px;font-weight:700">{{row.CNYPrice}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '豆粕',
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getContracts()
  },
  methods: {
    handleClick(v) {
      this.searchVal = v.label
      this.getContracts()
    },
    getContracts() {
      this.loading = true
      if (!this.searchVal) return
      this.$axios.get('baidu/sug', {
        params: {
          wd: this.searchVal,
          skip_login: 1,
          finClientType: "pc"
        }
      }).then((res) => {
        this.loading = false
        this.tableData = res.data.Result.stock.filter(item => {
          return item.market == 'ab' && item.type == 'futures' && item.holdingAmount.includes('万') && !item.name.includes('主连') && !item.name.includes('指数')
        }).sort((a, b) => {
          return b.holdingAmount.replace('万', '') - a.holdingAmount.replace('万', '')
        })

      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.main {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .filter {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  .table {
    width: 85%;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>